import React from "react";
import { Link } from "react-router-dom";
import PageTitle from '../../components/page-title'
import { Button, Divider, Input } from 'antd'
import { SnippetsOutlined, DeleteOutlined, CheckSquareOutlined } from '@ant-design/icons';
import CheackBoxPagination from '../../components/cheackBoxPagination'
// import { Select } from 'antd';
//import OverList from '../Over/OverList'
//const { Option } = Select;
class Multicast extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            select: [],
            header: [
                {
                    title: '模块SID',
                    //ßdataIndex: 'name',
                    render: () => <Input placeholder="必填" />
                },
                {
                    title: '模块CID',
                    dataIndex: 'p1',
                    render: () => <Input placeholder="必填" />
                },
                {
                    title: '组播IP',
                    //ßdataIndex: 'name',
                    render: () => <Input placeholder="必填" />
                },
                {
                    title: '组播端口',
                    //ßdataIndex: 'name',
                    render: () => <Input placeholder="必填" />
                },
            ],
            data: [
                { key: 1 },
                { key: 2 },
                { key: 3 },
            ],
            //计数器
            addKey: 3
        }
    }
    //select选择的是哪个
    handleChange(value) {
        console.log(value)
        // return value
    }

    deleteWhat(e) {
        this.setState({
            select: e
        })

    }

    delete() {
        //数组合并去重
        let arr1 = this.state.data
        let arr2 = this.state.select
        arr1 = arr1.filter(item => {
            let idList = arr2.map(v => v.key)
            return !idList.includes(item.key)

        })
        this.setState({
            data: arr1
        })
    }


    addData() {
        let mykey = this.state.addKey
        let newdata = this.state.data
        let a = mykey + 1
        newdata.push({ key: mykey + 1 })
        this.setState({
            data: [...newdata],
            //计数器
            addKey: a
        })
    }

    render() {
        return (
            <div id="page-wrapper">
                <div style={{ justifyContent: "center", display: "flex", marginTop: 20 }}>
                    <PageTitle title="3/3组播配置" /></div>
                <div>
                    <span>环境号</span> <span>100</span>
                </div>

                <Divider />
                <Button type="primary"
                    onClick={() => this.addData()}
                    icon={<SnippetsOutlined />}>

                    <Link to='/Ambient-into'
                        style={{ color: '#FFFFFF' }}>新增</Link>
                </Button>

                <Button
                    onClick={() => this.delete()}
                    style={{ marginLeft: 10 }}
                    type="ghost" danger={true}
                    icon={<DeleteOutlined />}>
                    删除
                </Button>

                <Button style={{ marginLeft: 10 }} type="ghost" icon={<CheckSquareOutlined />}>
                    保存
                </Button>

                <CheackBoxPagination columns={this.state.header}
                    dataSource={this.state.data}
                    pagination={false}
                    delete={e => { this.deleteWhat(e) }}
                //delete={this.delete.bind(this)}
                />

                <div style={{ justifyContent: "center", display: "flex", marginTop: 20 }}>

                    <Button type="primary" size="large" style={{ marginRight: 45 }}>
                        <Link to='/Ambient-into' >上一步</Link>
                    </Button>

                    <Button
                        type="primary"
                        size="large"
                    >
                        <Link to='/Ambient' >完成</Link>
                    </Button>

                </div>

            </div>
        )
    }
}



export default Multicast